<template>
  <div class="flex flex-col h-full">

    <div class="flex justify-between  mb-2 ">
        <!-- 策略选择&策略配置-->
        <div>
         <a-select
      
            placeholder="策略模版"
            style="width: 200px"
            @popupScroll="popupScroll"
          ></a-select>
          <a-button @click="openzhibiaoconfig"><ControlOutlined />筛选器</a-button>
        </div>   
        <!-- 列表方式 &搜索框-->
        <div class="flex items-center">
            <a-radio-group  v-model:value="listtype"  >
              <a-radio-button value="0"><BarsOutlined />股票列表</a-radio-button>
              <a-radio-button value="1"><AppstoreOutlined />多股同列</a-radio-button>
      
            </a-radio-group>
           <a-input-search
            placeholder="搜索股票代码"
            style="width: 200px"
            @search="onSearch">
          </a-input-search>
        </div>   
      
    </div>
    <div class="flex flex-1" v-if="listtype=='0'">
      <div :style="tablewidthstyle">
        <a-table  ref="mytableref" :columns="columns" :data-source="data" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :pagination="false" :scroll="{ x: scroll_x,y:scroll_y}" >
          <template #headerCell="{ column }">
            <template v-if="column.key === 'config'">
              <span @click="showcolconfig" class="cursor-pointer">
              <SettingOutlined />
              </span>
            </template>
          </template>

          <template #bodyCell="item">
            <template v-if="item?.column.key === 'logo'">
              <a-avatar src="http://139.196.161.247:8989/files/logo/81fdde4fdbb1c03f8b167de161e905b415fae14a7ff8cb241b2c43acdd4d00d3.svg" />
            </template>


            <template v-if="item?.column.key === 'stock_name'">
              <div class="flex flex-col justify-center cursor-pointer" @click="opendetail(item.record)">
                  <span class="text-blue-500">{{item.record.stockName}}</span>
                  <span>{{item.record.stockCode}}</span>
              </div>
            
            </template>
            <template v-if="item?.column.key === 'rise_and_fall'">
              <div v-if="item.record.riseAndFall>0" class="bg-red-500 flex justify-center m-1 text-white rounded " style="width:60px;">+{{item.record.riseAndFall}}%</div>
              <div v-else class="bg-green-500 flex justify-center m-1 text-white rounded " style="width:60px;">{{item.record.riseAndFall}}%</div>
            </template>

            <template v-if="item?.column.key === 'close'">
              <div v-if="item.record.riseAndFall>0" class=" flex justify-center m-1 text-red-500 rounded " style="width:60px;">{{item.record.close}}</div>
              <div v-else class="text-green-500 flex justify-center m-1 text-white rounded " style="width:60px;">{{item.record.close}}</div>
            </template>


            <template v-if="item.column.type === '6'">
              {{ item.record[item.column.dataIndex] }}
              <RenderChartItem :dataArr="item.record[item.column.dataIndex+'Arr']" />
            </template>


            <template v-if="item.column.type === '7'">
              <div style="display: flex;flex-direction: row;">
              <RenderCandleItem 
              :open="item.record[item.column.dataIndex+'Open']" 
              :close="item.record[item.column.dataIndex+'Close']" 
              :high="item.record[item.column.dataIndex+'High']" 
              :low="item.record[item.column.dataIndex+'Low']" />
                <div style="margin-left: .5em;">{{ item.record[item.column.dataIndex] }}%</div>
              </div>
            </template>

            <template v-if="item?.column.key === 'config'">
              <span></span>
            </template>
          </template>
      </a-table>
      </div>
      
      <!--弹出层显示股票详细-->
      <div class="flex  flex-col bg-white" v-if="visibleDetail" style="width:70%;">
            <div class="flex justify-between m-3">
               
                 <a-button @click="backallcol">返回</a-button>
                 <a-button type="primary">加自选</a-button>
               
            </div>
           <!-- 引入详情组件 -->

      </div>
    </div>
    <!-- 多股同列 -->
    <div v-else class="flex flex-col flex-1 bg-white" >
       <a-list :grid="{ gutter: 8, column: 3 }" :data-source="duogulistdata" class="w-full" >
         <template #renderItem="{ item }">
            <a-list-item :style="duoguitemheightStyle">
              <div :style="duoguitemheightStyle">
                 <!--多股Item组件 -->
                 111
              </div>
            </a-list-item>
          </template>
        </a-list>
        <div class="flex justify-end m-1">
        <a-pagination
          v-model:current="current"
          v-model:page-size="pageSizeRef"
          :page-size-options="pageSizeOptions"
          :total="total"
          show-size-changer
          @showSizeChange="onShowSizeChange"
        >
          <template #buildOptionText="props">
            <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
            <span v-else>全部</span>
          </template>
        </a-pagination>
        </div>
    </div>
    <!-- 弹出列显示配置抽屉 -->
    <a-drawer
    
    placement="right"
    width="30%"
    :closable="false"
    :maskClosable="true"
    v-model:visible="visibleConfig"
    :after-visible-change="afterVisibleChange"
  >
    <ColConfig :unshowlist="unshowlist" @addOrRemoveCols="addOrRemoveCols"/>
  </a-drawer>


<!-- 弹出列指标抽屉 -->
    <a-drawer
    
    placement="right"
    width="40%"
    :closable="false"
    :maskClosable="true"
    v-model:visible="visibleZhibiao"
    :after-visible-change="afterVisibleChange"
  >
    <ZhibiaoConfig />
  </a-drawer>
  </div>
</template>
<script lang="ts">
import type { TableColumnsType, } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { ref,defineComponent,onMounted, onUnmounted } from 'vue';
import { SettingOutlined,ControlOutlined ,BarsOutlined,AppstoreOutlined} from '@ant-design/icons-vue';
import { getTableColumns } from '/@/api/stock/selfstock';
import { getStocks } from '/@/api/stock/stockDailyDao'
import ColConfig from '/@/views/selfstock/configcol.vue';
import RenderCandleItem from "../stock/components/RenderCandleItem.vue";
import RenderChartItem from "../stock/components/RenderChartItem.vue";
import ZhibiaoConfig from '/@/views/selfstock/zhibiaoconfig.vue';
</script>

<script lang="ts" setup>  
  const columns: TableColumnsType = ref([
    { title: '', width: 100, dataIndex: 'logo', key: 'logo',align:'center', fixed: 'center'},
  ]);
  initColumns();
  getMyStocks();

  
  async function initColumns(){
    let res=await getTableColumns();
    //设置不显示的列用于弹窗展示
     unshowlist.value=res.unshowlist;
    let mycolumns=res.showlist;
    for(var i=0;i<mycolumns.length;i++){
        columns.value.push(mycolumns[i]);
    }
    
    columns.value.push({
      title: 'Action',
      key: 'config',
      fixed: 'right',
      width: 40,
    });
  }
  //获取列表数据
 
  const data: DataItem[] = ref([]);

  async function getMyStocks(){
    let datas=await getStocks();
    data.value=datas;
  }

  //配置列相关
  const visibleConfig=ref(false);
  const unshowlist=ref([]);
  function showcolconfig(){
    visibleConfig.value=true;
  }

  function addOrRemoveCols(obj){
      //alert(arrs.length)
      if(isColumnExists(obj.key)){
        //移除
        removeColumn(obj.key);
        scroll_x.value=scroll_x.value-100;
      }else{
        let dddlength=columns.value.length;
        columns.value.splice(dddlength-1, 0, obj);
         scroll_x.value=scroll_x.value+100;
      }
  }

  function isColumnExists(key) {
      return columns.value.some(a => a.key === key);
  }

  function removeColumn(key) {
      columns.value = columns.value.filter(col => col.key !== key);
  }

  //x方向滚动条参数设置
  const scroll_x=ref(1000);

  //点击股票相关
  const visibleDetail=ref(false);
  const tablewidthstyle=ref('width:100%;');
  const mytableref=ref(null);
  //定义3列
  const oldcolumns=ref([]);
  const oldscroll_x=ref(0);
  function opendetail(obj){
      //判断是否已经显示详情界面
      if(!visibleDetail.value){
        visibleDetail.value=true;
        oldcolumns.value=columns.value;
        oldscroll_x.value=scroll_x.value;
        columns.value=columns.value.slice(1,4);
        tablewidthstyle.value='width:30%;';
        scroll_x.value=300;
       // mytableref.resizeColumn();
      }
      //执行业务逻辑
  }

  function backallcol(){
    columns.value=oldcolumns.value;
     visibleDetail.value=false;
     tablewidthstyle.value='width:100%;';
     scroll_x.value=oldscroll_x.value;
     // mytableref.resizeColumn();
  }
    
  const listtype=ref("0");
 
  const scroll_y=ref(420);
  //多股同列
   const pageHeight = ref(0);
   const duoguitemheightStyle= ref('');
  onMounted(() => {
      // 获取页面高度
      pageHeight.value = window.innerHeight;
      console.log(" pageHeight.value ==="+ pageHeight.value );
      scroll_y.value=pageHeight.value-170;
      duoguitemheightStyle.value='height:'+(pageHeight.value-200)/2+'px';
      console.log(duoguitemheightStyle.value)

      window.addEventListener('resize', handleResize);
    });
  onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
  });

  const handleResize = () => {
      console.log('页面大小改变了！');
      // 处理页面大小改变的逻辑

      pageHeight.value = window.innerHeight;
      console.log(" pageHeight.value ==="+ pageHeight.value );
      scroll_y.value=pageHeight.value-170;
      duoguitemheightStyle.value='height:'+(pageHeight.value-200)/2+'px';
    };
  const duogulistdata=ref([{},{},{},{},{}]);

  const pageSizeOptions = ref<string[]>(['6', '9', '12', '15', '30']);
  const current = ref(1);
  const pageSizeRef = ref(10);
  const total = ref(50);
  const onShowSizeChange = (current: number, pageSize: number) => {
    console.log(current, pageSize);
    pageSizeRef.value = pageSize;
  };

   const visibleZhibiao=ref(false);

  function openzhibiaoconfig(){
    visibleZhibiao.value=true;
  }
</script>

